'use client';

import React from 'react';
import {
  Card,
  CardContent,
  Typography,
  Box,
  Avatar,
  Chip,
  IconButton
} from '@mui/material';
import VisibilityIcon from '@mui/icons-material/Visibility';
import FolderOpenIcon from '@mui/icons-material/FolderOpen';
import DeleteIcon from '@mui/icons-material/Delete';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import { useTranslation } from 'react-i18next';

// 定义8种不同的渐变背景，对应截图中的8个卡片
const gradientBackgrounds = [
  'linear-gradient(135deg, #ff6b9d 0%, #c44569 50%, #74b9ff 100%)',
  'linear-gradient(135deg, #fd79a8 0%, #fdcb6e 50%, #74b9ff 100%)',
  'linear-gradient(135deg, #e17055 0%, #fdcb6e 50%, #00b894 100%)',
  'linear-gradient(135deg, #6c5ce7 0%, #a29bfe 50%, #74b9ff 100%)',
  'linear-gradient(135deg, #ff7675 0%, #fd79a8 50%, #fdcb6e 100%)',
  'linear-gradient(135deg, #00b894 0%, #55a3ff 50%, #a29bfe 100%)',
  'linear-gradient(135deg, #fdcb6e 0%, #e17055 50%, #fd79a8 100%)',
  'linear-gradient(135deg, #74b9ff 0%, #6c5ce7 50%, #00b894 100%)'
];

export default function ProjectCard({ project, onDeleteClick }) {
  const { t } = useTranslation();
  // 使用项目ID来确定使用哪个渐变背景
  const gradientIndex = (project.id - 1) % gradientBackgrounds.length;
  const gradientBackground = gradientBackgrounds[gradientIndex];

  return (
    <Card
      sx={{
        width: 332,
        height: 266,
        display: 'flex',
        flexDirection: 'column',
        overflow: 'visible',
        borderRadius: '6px',
        mt: '10px',
        ml: '10px',
        mr: '10px',
        boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
        transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
        '&:hover': {
          transform: 'translateY(-4px)',
          boxShadow: '0 8px 24px rgba(0,0,0,0.15)'
        }
      }}
    >
      <CardContent sx={{ p: 0, position: 'relative', flex: 1, display: 'flex', flexDirection: 'column' }}>
        {/* 渐变背景区域 */}
        <Box
          sx={{
            height: 100,
            background: gradientBackground,
            position: 'relative',
            borderRadius: '12px 12px 0 0',
            '&::before': {
              content: '""',
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              background: 'url("data:image/svg+xml,%3Csvg width="100" height="100" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100" height="100" filter="url(%23noise)" opacity="0.1"/%3E%3C/svg%3E")',
              borderRadius: '12px 12px 0 0',
              opacity: 0.3
            }
          }}
        />

        {/* 白色内容区域 */}
        <Box
          sx={{
            p: 2,
            flex: 1,
            display: 'flex',
            flexDirection: 'column',
            bgcolor: 'white',
            borderRadius: '0 0 12px 12px'
          }}
        >
          {/* 头像和文本的水平布局 */}
          <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
            {/* 头像 */}
            <Avatar
              sx={{
                width: 40,
                height: 40,
                bgcolor: '#d63031', // 深红橙色背景
                color: 'white',
                fontSize: '1rem',
                fontWeight: 600,
                border: '2px solid white', // 细白色边框
                boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
                mr: 2 // 右边距
              }}
            >
              中
            </Avatar>
            
            {/* 文本内容 */}
            <Box sx={{ flex: 1, display: 'flex', alignItems: 'flex-start', position: 'relative' }}>
              <Box sx={{ flex: 1 }}>
                {/* 项目标题 */}
                <Typography
                  sx={{
                    fontWeight: 600,
                    color: '#2d3436', // 深灰色
                    mb: 0.5,
                    fontSize: '16px'
                  }}
                >
                  中医模型微调
                </Typography>

                {/* 项目描述 */}
                <Typography
                  sx={{
                    color: '#636e72', // 浅灰色
                    fontSize: '12px'
                  }}
                >
                  针对中医的智慧模型
                </Typography>
              </Box>
              
              {/* 更多图标 */}
              <IconButton 
                sx={{ 
                  color: 'rgba(86, 85, 92, 1)', 
                  p: 0,
                  width: '15px',
                  height: '13px',
                  minWidth: '15px',
                  minHeight: '13px',
                  position: 'absolute',
                  right: '120px',
                  top: '5px'
                }}
              >
                <MoreVertIcon sx={{ fontSize: '13px', transform: 'rotate(90deg)' }} />
              </IconButton>
            </Box>
          </Box>

          {/* 芯片区域 */}
          <Box
            sx={{
              display: 'flex',
              justifyContent: 'flex-start', // 改为左对齐
              gap: 0.5, // 减小间距
              mb: 2
            }}
          >
            <Chip
              label="0问题"
              size="small"
              sx={{
                bgcolor: 'rgba(253, 113, 175, 0.3)',
                color: 'rgba(253, 113, 175, 1)',
                fontWeight: 500,
                fontSize: '0.75rem',
                height: '24px', // 紧凑高度
                '& .MuiChip-label': {
                  px: 1 // 减小内边距
                }
              }}
            />
            <Chip
              label="0数据集"
              size="small"
              sx={{
                bgcolor: 'rgba(85, 119, 255, 0.2)',
                color: 'rgba(85, 119, 255, 1)',
                fontWeight: 500,
                fontSize: '0.75rem',
                height: '24px', // 紧凑高度
                '& .MuiChip-label': {
                  px: 1 // 减小内边距
                }
              }}
            />
          </Box>

          {/* 底部信息栏 */}
          <Box
            sx={{
              mt: 'auto',
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              pt: 1
            }}
          >
            {/* 左侧时间戳 */}
            <Typography variant="caption" color="#636e72" sx={{ fontSize: '0.75rem' }}>
              8 hrs ago
            </Typography>
            
            {/* 右侧图标组 */}
            <Box sx={{ display: 'flex', gap: 1 }}>
              <VisibilityIcon sx={{ color: 'rgba(168, 168, 168, 1)', fontSize: '1rem' }} />
              <DeleteIcon sx={{ color: 'rgba(168, 168, 168, 1)', fontSize: '1rem' }} />
              <FolderOpenIcon sx={{ color: 'rgba(168, 168, 168, 1)', fontSize: '1rem' }} />
            </Box>
          </Box>
        </Box>
      </CardContent>
    </Card>
  );
}
